<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>BinaryTreeGraph</title>
    <link rel="icon" href="img/logo.ico" type="image/x-icon" >
    <link rel="stylesheet" type="text/css" href="css/joint.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.min.css" />
</head>
<body>

<div id="controls">

    <div id="common" class="box">
        <div class="type">
            类型：
            <select name="type">
                <option value="0">二叉树（Binary Tree）</option>
                <option value="1">二叉搜索树（Binary Search Tree）</option>
                <option value="2">AVL树（AVL Tree）</option>
                <option value="3">红黑树（Red Black Tree）</option>
                <option value="4">二叉堆（Binary Heap）</option>
            </select>
        </div>
    </div>

    <div class="control box" id="bt">
        <h2>二叉树（Binary Tree）</h2>
        <div class="content">
            <div>
                <div>
                    <input type="text" class="node" placeholder="节点"><br>
                    <input type="text" class="left" placeholder="左子节点"><br>
                    <input type="text" class="right" placeholder="右子节点"><br>
                </div>
                <div>
                    <input class="add" type="button" value="添加">
                    <input class="remove" type="button" value="删除">
                    <input class="clear" type="button" value="清空">
                </div>
            </div>
        </div>
    </div>

    <div class="bst control box" id="bst" style="display: none">
        <h2>二叉搜索树（Binary Search Tree）</h2>
        <div class="content"></div>
    </div>

    <div class="bst control box" id="avl" style="display: none">
        <h2>AVL树（AVL Tree）</h2>
        <div class="content"></div>
    </div>

    <div class="bst control box" id="rb" style="display: none">
        <h2>红黑树（Red Black Tree）</h2>
        <div class="content"></div>
    </div>

    <div class="bst control box" id="bh" style="display: none">
        <h2>二叉堆（Binary Heap）</h2>
        <div class="content">
            <div class="heap-type">
                类型：
                <label>最大堆<input class="max-heap" name="heap-type" type="radio" checked></label>
                <label>最小堆<input class="min-heap" name="heap-type" type="radio"></label>
            </div>
        </div>
    </div>
</div>

<div id="modules" style="display: none;">
    <div class="paper"></div>

    <div class="orders">
        <div>
            所有节点【<span class="node-count">0</span>】：
            <select name="orders">
                <option value="2">中序遍历（Inorder）</option>
                <option value="0">层序遍历（Level Order）</option>
                <option value="1">前序遍历（Preorder）</option>
                <option value="3">后序遍历（Postorder）</option>
            </select>
        </div>
        <div><textarea class="show-order" disabled="disabled" placeholder="遍历数据"></textarea></div>
    </div>

    <div class="link-type">
        箭头：
        <label>肘形<input class="elbow" type="radio" checked></label>
        <label>直线<input class="line" type="radio"></label>
    </div>

    <div class="bst-input">
        <div>
            <input type="text" class="max-count" placeholder="最大随机数量">
            <input type="text" class="max-value" placeholder="最大随机数值">
            <input class="random" type="button" value="随机">
        </div>
        <div>
            <textarea class="data"
                      placeholder="请输入整数，数据之间用逗号或空格隔开&#10;【最大随机数量】默认【20】&#10;【最大随机数值】默认【100】"></textarea>
        </div>
        <div>
            <input class="add" type="button" value="添加">
            <input class="remove" type="button" value="删除">
            <input class="clear" type="button" value="清空">
        </div>
    </div>
</div>

<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/lodash.min.js"></script>
<script src="js/lib/backbone.min.js"></script>
<script src="js/lib/joint.min.js"></script>
<script src="js/lib/ext.min.js"></script>
<script src="js/common.min.js"></script>
<script src="js/tree/BinaryTree.min.js"></script>
<script src="js/tree/BST.min.js"></script>
<script src="js/tree/BBST.min.js"></script>
<script src="js/tree/AVLTree.min.js"></script>
<script src="js/tree/RBTree.min.js"></script>
<script src="js/heap/Heap.min.js"></script>
<script src="js/heap/BinaryHeap.min.js"></script>
<script src="js/graph.min.js"></script>
<script src="js/index.min.js"></script>
</body>
</html>